<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .triangle{
            width: 0;
            height: 0;
            border-right: 5px solid #ffffff;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            position: absolute;
            left: -5px;
        }

        .item{
            margin-bottom: 10px;
            border: 1px solid red;
            display: flex;
            justify-content: flex-start;
        }

        .avatar{
            width: 60px;
        }
        .avatar img{
            width: 50px;
        }

        .msg {padding: 0 10px;}

        .msg .top {color: grey; font-size: 12px;}
        .msg-content {
            display: inline-block;
            border-radius: 3px;
            color: black;
            font-size: 14px;
            padding: 5px;
            margin-top: 3px;
            background-color: #ffffff;
            position: relative;
        }
    </style>
</head>
<body>

<div id="main">

    <div class="item">
        <div class="avatar">
            <img src="https://wx.qlogo.cn/mmhead/Q3auHgzwzM6icffKicyicyLtIs1Q8cvHGiaE3AibXYWugjBzHLb126UTN0Q/0" alt="">
        </div>
        <div class="msg">
            <div class="top">
                <span>发送人：名称 ;</span>
                <span>接收人：名称 ;</span>
                <span>发送时间：2020-01-01 00:00:00 ;</span>
            </div>
            <div class="msg-content">
                <div class="triangle"></div>
                聊天内容 聊天内容
            </div>
        </div>
    </div>


        @foreach($list->items() as $item)
{{--            {{ dd($item['msg']) }}--}}

            <div class="item">
{{--                <div>所有内容 => {{ $item }}</div></div>--}}

                <div class="avatar">
{{--                    <img src="https://wx.qlogo.cn/mmhead/Q3auHgzwzM6icffKicyicyLtIs1Q8cvHGiaE3AibXYWugjBzHLb126UTN0Q/0" alt="">--}}
                    <img style="max-width: 50px;" src="{{ $item['workWechatUser']['avatar'] ?? '' }}" alt="">
                </div>
                <div class="msg">
                    <div class="top">
                        <span>发送人：{{ $item['workWechatUser']['name'] ?? '' }} ;</span>
                        <span>接收人：{{ json_encode($item['msg']['tolist'] ?? []) }} ;</span>
                        <span>发送时间：{{ isset($item['msg']['msgtime']) ? date('Y-m-d H:i:s', $item['msg']['msgtime'] / 1000) : '' }} ;</span>
                    </div>
                    <div class="msg-content">
                        <div class="triangle"></div>
                        @if (isset($item['msg']['msgtype']))
                            @if ($item['msg']['msgtype'] == 'text')
                                {{ $item['msg']['text']['content'] }}
                            @elseif ($item['msg']['msgtype'] == 'file')
                                <a href="{{ $item['msg']['file']['file_url'] }}">{{ $item['msg']['file']['filename'] }}</a>
                                <br>
                                <span style="color: grey;">{{ $item['msg']['file']['filesize'] / 1000 }}k</span>
                            @elseif ($item['msg']['msgtype'] == 'image')
                                <img style="max-height: 200px;" src="{{ $item['msg']['image']['file_url'] }}" alt="">
                            @elseif ($item['msg']['msgtype'] == 'emotion')
                                <img style="max-width: 10vw;" src="{{ $item['msg']['emotion']['file_url'] }}" alt="">
                            @elseif ($item['msg']['msgtype'] == 'docmsg')
                                <a href="{{ $item['msg']['doc']['link_url'] ?? '' }}"><span>{{ $item['msg']['doc']['title'] }}</span></a>
                                <br>
                                <span style="color: grey;">{{ $item['msg']['doc']['doc_creator']  }} 创建</span>
                            @endif
                        @else
                            {{ json_encode($item['msg']) }}
                        @endif
                    </div>
                </div>
            </div>

        @endforeach

</div>

<div class="pull-right paginate">
    {{ $list->links() }}
</div>

</body>
</html>
